<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">首页</router-link> |
      <router-link to="/blog">博客</router-link>|
      <router-link to="/video">视频</router-link>
    </div>
    <span v-if="showUser">
      欢迎：{{username}}
      <button @click="logOut">注销</button>
    </span>
    <router-view/>
  </div>
</template>
<script>
export default {
  data(){
    return {
      username:localStorage.getItem("usr"),
      showUser:localStorage.getItem('usr')
    }
  },
  watch:{
    '$route'(){
      this.username = localStorage.getItem('usr');
      this.showUser = localStorage.getItem('usr');
    }
  },
  methods:{
    logOut(){
      localStorage.clear();
      this.$router.push("/login")
    }
  }
}
</script>

<style>

</style>
